<template>
	<view class="content">
		<view class="content-search">
			<img class="content-search-img" src="/static/img/index/search.png">
			<view class="uni-form-item uni-column content-search-input">
				<input class="uni-input" confirm-type="search" @focus="gotoSearch" placeholder="搜索"/>
			</view>
		</view>
		<category :categoryList="categoryList" :subCategoryList="subCategoryList" @tolower="tolower" :classifyName="classifyName" @categoryMainClick="categoryMainClick" @categorySubClick="categorySubClick"></category>
	</view>
</template>
<script>
	import category from "./category.vue"
	export default {
		data() {
			return {
				categoryList:[],
				subCategoryList:[],
				classifyName:'',
				pageNo:1,
				typeId:'',
				isMore:true
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			getList: function () {
			    let that = this;
			    uni.showLoading({
			      title: '',
			      mask: true
			    })
				this.$api.goodsList().then((res)=>{
					uni.hideLoading();
					if(res.data.code === 1){
						that.categoryList = res.data.data;
						that.typeId = res.data.data[0].id;
						that.classifyName = res.data.data[0].name;
						that.goodsListDetail();
					}
				}).catch((err)=>{
					uni.hideLoading()
					console.log('request fail', err);
				})
			},
			goodsListDetail() {
			    let that = this;
				uni.showLoading({
				  title: '',
				  mask: true
				})
				this.$api.goodsListDetail({
					  pageNo: this.pageNo,
					  typeId: this.typeId
					}).then((res)=>{
					uni.hideLoading();
					if(res.data.code === 1){
						if(res.data.data.goodsBeanList.length < 10){
							that.isMore =false
						}else if(res.data.data.goodsBeanList.length === 10){
							that.isMore =true
						}
						that.subCategoryList = that.subCategoryList.concat(res.data.data.goodsBeanList)
					}
				}).catch((err)=>{
					uni.hideLoading()
					console.log('request fail', err);
				})
			},
			gotoSearch(){
				uni.navigateTo({
				    url: '/pages/search/search'
				});
			},
			categoryMainClick(category){
				this.typeId = category.id;
				this.pageNo = 1;
				this.goodsListDetail()
				this.subCategoryList=[];
				this.classifyName = category.name;
			},
			tolower(){
				if(this.isMore){
					this.pageNo++
					this.goodsListDetail()
				}
			},
			categorySubClick(category){
				uni.navigateTo({
				    url: '/pages/goods/goodsDetail?id='+category.goodsId
				});
			}
		},
		components:{
			category
		},
	}
</script>

<style>
	.content-search{
		background-color: #fff;
		display: flex;
		position: relative;
		padding: 20upx 30upx;
		box-sizing: border-box;
		margin-bottom: 2upx;
	}
	.content-search-img{
		flex: 1;
		position: absolute;
		top: 30%;
		left: 50upx;
		width: 40upx;
		height: 40upx;
	}
	.content-search-input{
		flex: 10;
		background-color: #F4F4F4;
		border-radius: 50upx;
		overflow: hidden;
		padding: 0 0 0 50upx;
		box-sizing: border-box;
	}
	.content-search-input .uni-input{
		background-color: #F4F4F4;	
	}
</style>
